import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, Row, Col, Button, message, Icon, Select, Table, DatePicker, InputNumber, Modal } from 'antd'
import { connect } from 'dva'
import { UIStatus } from 'utils/enums'
import { Page, List, DropOption, WordCard, ChooseModal } from 'components'
import moment from 'moment'
import { transactionTypeData, paymentType, visableType } from 'utils/seletLocalData'
import { converDate, SelectProps, validateNumber, keepDecimal } from 'utils'
import DetailModal from './Modal'
import styles from '../../../themes/detail.less'
import { createMenu } from '../util'
import { getArrtoColums } from '../../../utils/createTransactionCloum'
import TableCard from '../../../components/TableCard'

const FormItem = Form.Item
const ButtonGroup = Button.Group
const Option = Select.Option
const { TextArea } = Input
const formItemLayout = {
  labelCol: {
    span: 12,
  },
  wrapperCol: {
    span: 12,
  },
}
const ColProps = {
  span: 8,
  style: {
    marginBottom: 0,
  },
}
const ButtonProps = {
  size: 'large',
  style: {
    marginBottom: 0,
  },
}
const TransactionReceiptDetail = ({
  transactionReceiptDetail,
  dispatch,
  loading,
  location,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
}) => {
  const item = transactionReceiptDetail.data || {}
  const dateFormat = 'DD/MM/YYYY'
  const { customerEntity, modalVisible, currentNZD, modalType, fromClients, _fromClients, currentItem, currenciesRateData, transaction, transactionSelected } = transactionReceiptDetail
  const { currenciesTypeData, fundsTypeData, detailModalType, serviceAmountData, TransactionInfoVisible, matchType } = transactionReceiptDetail
  const { customerId, personId, customerAccount, _toClients, toClients, customerInfo, fromClientsKey, toClientsKey, companyAccount } = transactionReceiptDetail
  const { fromCurrencyCode, toCurrencyCode, localRate, fromAmount, toAmount, amountLocal, arrives, pays, currentUIStatus, transmodeCode, transactionNumber } = transactionReceiptDetail
  const handleDispatch = (type, action) => {
    dispatch({
      type: `transactionReceiptDetail/${type}`,
      payload: action,
    })
  }
  // /以下内容为复杂设置
  const modalProps = {
    item: modalType === 'create' ? {} : currentItem,
    visible: modalVisible,
    maskClosable: false,
    width: 500,
    transaction,
    basicInfo: { customerId, personId },
    detailModalType,
    transactionSelected,
    TransactionInfoVisible,
    optionData: { customerEntity, customerAccount, companyAccount, fundsTypeData },
    confirmLoading: loading.effects['transactionReceiptDetail/update'],
    title: `${modalType === 'create' ? 'Create' : 'Update'}`,
    wrapClassName: 'vertical-center-modal',
    handleType (e) {
      let data = {}
      switch (e) {
        case 'Person':
          data = {
            entityVisible: false,
            accountVisible: false,
          }
          break
        case 'Account':
          data = {
            entityVisible: false,
            accountVisible: true,
          }
          break
        case 'Entity':
          break
        default:
      }
      handleDispatch('updateState', data)
    },
    onOk (data) {
      let foreignCurrencyCode = getFieldsValue(['fromCurrencyCode', 'toCurrencyCode', 'exchangeRate'])
      let keyandIndex = {}
      switch (detailModalType) {
        case 'fromModal' :
          keyandIndex.key = fromClientsKey
          keyandIndex.index = fromClientsKey
          handleDispatch('updateModal', { ...data, ...keyandIndex, foreignCurrencyCode: foreignCurrencyCode.fromCurrencyCode})
          break
        case 'toModal' :
          keyandIndex.key = toClientsKey
          keyandIndex.index = toClientsKey
          handleDispatch('updateModal', { ...data, ...keyandIndex, foreignCurrencyCode: foreignCurrencyCode.toCurrencyCode})
          break
        case 'arrivesModal' :
          handleDispatch('Arrives', { arrive: { ...data, foreignCurrencyCode: foreignCurrencyCode.fromCurrencyCode }, modalType, id: item.id})
          break
        case 'paysModal' :
          handleDispatch('Pays', { pay: { ...data, foreignCurrencyCode: foreignCurrencyCode.toCurrencyCode }, modalType, id: item.id})
          break
        case 'threeTransactionModal' :
          data.arrive = { ...data.arrive, foreignCurrencyCode: foreignCurrencyCode.fromCurrencyCode, toFrom: '0', transactionId: item.id, customerId }
          data.pay = { ...data.pay, foreignCurrencyCode: foreignCurrencyCode.toCurrencyCode, toFrom: '1', transactionId: item.id, customerId }
          handleDispatch('addArriveThree', { ...data, modalType, id1: item.id })
          break
        default :
          break
      }
    },
    onCancel () {
      handleDispatch('updateState', { TransactionInfoVisible: false, modalVisible: false })
    },
    handleSelected (value) {
      handleDispatch('updateState', { transactionSelected: value.transactionSelected, TransactionInfoVisible: value.TransactionInfoVisible })
    },
  }
  // 实时汇率列表
  const curRatedata = ['currencyCodeFrom/currencyCodeFrom', 'currencyCodeTo/currencyCodeTo', 'Buying Bank Rate/buyingBankRate1', 'Buying Rate/buyingRate1', 'Selling Bank Rate/sellingBankRate1', 'Selling Rate/sellingRate1']
  const ClientdataFrom = ['Type/type', 'Payment/payment', 'CompanyAccount/companyAccountId', 'Amount/foreignAmount', 'Comments/fundsComment']
  const ClientdataTo = ['Type/type', 'Payment/payment', 'CompanyAccount/companyAccountId', 'Amount/foreignAmount', 'Comments/fundsComment']
  const ClientdataPay = ['Type/type', 'Payment/payment', 'CompanyAccount/companyAccountId', 'Amount/amount']
  const ClientdataArrive = ['Type/type', 'Payment/payment', 'CompanyAccount/companyAccountId', 'Amount/foreignAmount']
  const curRateColumns = getArrtoColums(curRatedata)
  const fromClientColumns = getArrtoColums(ClientdataFrom, companyAccount)
  const toClientColumns = getArrtoColums(ClientdataTo, companyAccount)
  const arrivesTable = getArrtoColums(ClientdataArrive, companyAccount)
  const paysTable = getArrtoColums(ClientdataPay, companyAccount)
  const tableStyle = {
    marginBottom: '20px',
  }
  const menuData = [{
    key: '1',
    name: 'Update',
  }, {
    key: '2',
    name: 'Delete',
  }, {
    key: '4',
    name: 'Verify',
  }, {
    key: '8',
    name: 'confirm',
  }]

  const tableProps = {
    dataSource: {
      ...customerInfo,
    },
    blocks: [
      {
        title: 'customerNumber',
        key: 'customerNumber',
      },
      {
        title: 'firstName',
        key: 'firstName',
      },
      {
        title: 'customerId ',
        key: 'number',
      },
      {
        title: 'lastName',
        key: 'lastName',
      },
      {
        title: 'phoneNumber',
        key: 'phoneNumber',
      },

    ],
    cols: 2,
    rows: 10,
  }
  const WordCardProps = [
    {
      status: item.status,
      type: 'status',
    },
    {
      status: item.isThree,
      type: 'isThree',
    },
  ]
  const defaultDate = moment(new Date().getTime() + 3600000 * 4)
  // 以下内容为函数
  const handleOk = () => {
    validateFields((errors, fieldsValue) => {
      if (errors) {
        return
      }
      if (fromClients.length === 0) {
        message.error('At least one \'fromClient\' is needed')
        return
      }
      if (toClients.length === 0) {
        message.error('At least one \'toClient\' is needed')
        return
      }
      if (fieldsValue.birthdate) {
        fieldsValue.birthdate = fieldsValue.birthdate.format('YYYY-MM-DD')
      }
      fieldsValue.dateTransaction = fieldsValue.dateTransaction.format('YYYY-MM-DD')
      fieldsValue.visible = fieldsValue.visible === true ? '1' : '0'
      const serverData = serviceAmountData.filter(fee => fieldsValue.serviceFee === fee.id)
      const data = {
        customerId,
        id: item.id || 1,
        ...fieldsValue,
        fromClients: _fromClients,
        toClients: _toClients,
        serviceFee: {
          ...serverData[0],
          ...fieldsValue,
          transactionId: item.id || 1,
        },
      }
      handleDispatch('saveAll', { data, pathname: location.pathname })
    })
  }
  const modalWaring = (content) => {
    Modal.warning({
      content
    })
  }
  const handlecalcu = (type) => {
    const values = getFieldsValue(['fromAmount', 'toAmount', 'exchangeRate', 'localRate'])
    switch (type) {
      case 'muti':
        if (!values.fromAmount || !values.exchangeRate) {
          modalWaring('fromAmoun and exchangeRate can no be empty')
          return
        }
        handleDispatch('updateState', { toAmount: Math.floor(values.fromAmount * values.exchangeRate * 10000) / 10000 })
        break
      case 'divi':
        if (!values.fromAmount || !values.exchangeRate) {
          modalWaring('fromAmount and exchangeRate can not be empty')
          return
        }
        handleDispatch('updateState', { toAmount: Math.floor(values.fromAmount / values.exchangeRate * 10000) / 10000 })
        break
      case 'local':
        switch (currentNZD) {
          case 'FromCurrencyCode':
            if (!values.fromAmount) {
              modalWaring('fromAmount can not be empty')
              return
            }
            handleDispatch('updateState', { amountLocal: values.fromAmount })
            break;
          case 'ToCurrencyCode':
            if (!values.toAmount) {
              modalWaring('toAmount can not be empty')
              return
            }
            handleDispatch('updateState', { amountLocal: values.toAmount })
            break;
          default:
            if (!values.fromAmount || !values.localRate) {
              modalWaring('localRate and fromAmount can not be empty')
              return
            }
            handleDispatch('updateState', { amountLocal: keepDecimal(values.fromAmount * values.localRate, 4) })
        }
        if (currentNZD === 'FromCurrencyCode') {
          if (!values.fromAmount) {
            modalWaring('fromAmount can not be empty')
            return
          }
          handleDispatch('updateState', { amountLocal: values.fromAmount })
        } else if (currentNZD === 'ToCurrencyCode') {
          if (!values.toAmount) {
            modalWaring('toAmount can not be empty')
            return
          }
          handleDispatch('updateState', { amountLocal: values.toAmount })
        } else {
          if (!values.fromAmount || !values.localRate) {
            modalWaring('localRate and fromAmount can not be empty')
            return
          }
          handleDispatch('updateState', { amountLocal: Math.floor(values.fromAmount * values.localRate * 10000) / 10000 })
        }
        break
      default:
        break
    }
  }

  const handleCreateFromDetail = () => {
    handleDispatch('showModal', { modalType: 'create', currentItem: {}, detailModalType: 'fromModal' })
  }
  const handleCreateToDetail = () => {
    handleDispatch('showModal', { modalType: 'create', currentItem: {}, detailModalType: 'toModal' })
  }
  const handleCreateArrivesDetail = () => {
    handleDispatch('showModal', { modalType: 'create', currentItem: {}, detailModalType: 'arrivesModal' })
  }
  const handleCreateThreeDetail = () => {
    handleDispatch('showModal', { modalType: 'create', currentItem: {}, detailModalType: 'threeTransactionModal' })
    handleDispatch('getTransaction', { status: 0 })
  }
  const handleCreatePaysDetail = () => {
    handleDispatch('showModal', { modalType: 'create', currentItem: {}, detailModalType: 'paysModal' })
  }

  const handleMenuClick = (record, e, list, type) => {
    let theModalType = type.replace(/Clients/, 'Modal')
    let delAndConfirmType = type.replace(/Clients/, '')
    delAndConfirmType = delAndConfirmType.replace(/^[a-zA-Z]/, delAndConfirmType.charAt(0).toUpperCase())
    if (type === 'arrivesClients' || type === 'paysClients') {
      switch (e.key) {
        case '1':
          handleDispatch('showModal', { modalType: 'update', currentItem: record, detailModalType: theModalType })
          break;
        case '2':
          Modal.confirm({
            title: 'Are you sure delete this record?',
            onOk () {
              // 删除接口
              handleDispatch(`del${delAndConfirmType}`, { id: item.id, mixId: record.id })
            },
          })
          break;
        case '8':
          Modal.confirm({
            title: 'Are you sure Confirm this record?',
            onOk () {
              // 删除接口
              handleDispatch(`confirm${delAndConfirmType}`, { id: item.id, mixId: record.id })
            },
          })
          break;
        default:
          break;
      }
    }
  }

  const createColumns = (thecolumns, list, type) => {
    let menulistArr = []
    if (type === 'arrivesClients' || type === 'paysClients') {
      menulistArr = createMenu(11, menuData)
    } else {
      menulistArr = createMenu(3, menuData)
    }
    let operColumn = {
      title: 'Operation',
      key: 'operation',
      width: 100,
      render: (text, record) => {
        return <DropOption onMenuClick={e => handleMenuClick(record, e, list, type)} menuOptions={menulistArr} />
      },
    }
    thecolumns.push(operColumn)
  }

  const handleCurrencyChange = (type, value) => {
    if (type === 'from' && value === 'NZD') {
      handleDispatch('updateState', { fromCurrencyCode: value, localRate: 1, currentNZD: 'FromCurrencyCode' })
    } else if (type === 'to' && value === 'NZD') {
      handleDispatch('updateState', { toCurrencyCode: value, localRate: 1, currentNZD: 'ToCurrencyCode' })
    } else if (type === 'from') {
      handleDispatch('updateState', { fromCurrencyCode: value })
    } else if (type === 'to') {
      handleDispatch('updateState', { toCurrencyCode: value })
    }
    // type是from则判断to的值，type是to则判断from的值
    const checkValue = type === 'from' ? toCurrencyCode : fromCurrencyCode
    const toValue = type === 'from' ? toCurrencyCode : value
    const fromValue = type === 'from' ? value : fromCurrencyCode
    if (checkValue) {
      handleDispatch('getCurrencyRate', { currencyCodeFrom: fromValue, currencyCodeTo: toValue })
    }
  }


  // 设置下拉列表框
  const companyAccountOption = companyAccount.map(d => <Option key={d.companyAccountId}>{d.name}</Option>)
  const currenciesTypeOption = currenciesTypeData.map(d => <Option key={d.code}>{d.code}</Option>)
  const paymentTypeOption = paymentType.map(d => <Option key={d.key}>{d.value}</Option>)
  const serviceAmountOption = serviceAmountData.map(d => <Option key={d.id}>{d.serviceFee}</Option>)
  const transmodeCodeOption = transmodeCode.map(d => <Option key={d.code}>{`${d.code}(${d.name})`}</Option>)
  const visableOptions = visableType.map(d => <Option key={d.key}>{d.value}</Option>)
  // /设置是否显示表格
  if (currentUIStatus !== UIStatus.ARRIVE_AND_PAY_GET_SUCCESS) {
    createColumns(fromClientColumns, fromClients, 'fromClients')
    createColumns(toClientColumns, toClients, 'toClients')
  }
  createColumns(arrivesTable, arrives, 'arrivesClients')
  createColumns(paysTable, pays, 'paysClients')
  const createSaveButton = () => {
    return (
      <Col span={5}>
        <div className={styles.div_buttonGroup}>
          <ButtonGroup {...ButtonProps}>
            <Button onClick={handleOk}>
              Save<Icon type="save" />
            </Button>
          </ButtonGroup>
        </div>
      </Col>
    )
  }
  const createCustomerInfo = () => {
    return (
      <span>
        <Row>
          <Col span={10}><div className={styles.isThreeCustomerInfo}>CustomerInfo</div> </Col>
        </Row>
        <Row>
          <Col>
            <TableCard {...tableProps} />
          </Col>
        </Row>
      </span>
    )
  }
  const createCreateButton = (func) => {
    return (
      <div>
        <div className={styles.div_buttonGroup}>
          <ButtonGroup {...ButtonProps}>
            <Button onClick={func}>
              Create<Icon type="save" />
            </Button>
          </ButtonGroup>
        </div>
      </div>
    )
  }
  const createArriveAndPay = () => {
    return (
      <div>
        <div className={styles.title}>Arrives</div>
        <div className={styles.div_buttonGroup}>
          <ButtonGroup {...ButtonProps}>
            <Button onClick={handleCreateArrivesDetail}>
              Create<Icon type="save" />
            </Button>
            &nbsp;
            <Button onClick={handleCreateThreeDetail}>
              Third transaction <Icon type="save" />
            </Button>
          </ButtonGroup>
        </div>
        <Table columns={arrivesTable} dataSource={arrives} pagination={false} style={tableStyle} rowKey={(record) => { return record.id }} />
        <div className={styles.title}>Pays</div>
        <div className={styles.div_buttonGroup}>
          <ButtonGroup {...ButtonProps}>
            <Button onClick={handleCreatePaysDetail}>
              Create<Icon type="save" />
            </Button>
          </ButtonGroup>
        </div>
        <Table columns={paysTable} dataSource={pays} pagination={false} style={tableStyle} rowKey={(record) => { return record.id }} />
      </div>
    )
  }
  const createTransactionInfo = () => {
    return (
      <span>
        <div className={styles.title}>TransactionInfo</div>
        <Row gutter={0}>
          <Col {...ColProps}>
            <FormItem label="TransactionNumber" hasFeedback {...formItemLayout}>
              {getFieldDecorator('transactionNumber', {
                initialValue: transactionNumber || item.transactionNumber,
              })(<Input disabled />)}
            </FormItem>
          </Col>
          <Col {...ColProps} >
            <FormItem label="TransactionDate" hasFeedback {...formItemLayout}>
              {getFieldDecorator('dateTransaction', {
                initialValue: item.dateTransaction ? moment(converDate(item.dateTransaction), dateFormat) : defaultDate,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<DatePicker style={{ width: '100%' }} format={dateFormat} />)}
            </FormItem>
          </Col>
          <Col {...ColProps} >
            <FormItem label="Visible" hasFeedback {...formItemLayout}>
              {getFieldDecorator('visible', {
                initialValue: item.visible || '0',
                rules: [
                  {
                    required: true,
                  },
                ],
              })(
                <Select style={{ width: '100%' }}>{visableOptions}</Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col {...ColProps}>
            <FormItem label="FromCurrencyCode" hasFeedback {...formItemLayout}>
              {getFieldDecorator('fromCurrencyCode', {
                initialValue: item.fromCurrencyCode,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Select style={{ width: '100%' }} {...SelectProps} onSelect={handleCurrencyChange.bind(null, 'from')}>{currenciesTypeOption}</Select>)}
            </FormItem>
          </Col>
          <Col {...ColProps} >
            <FormItem label="FromAmount" hasFeedback {...formItemLayout}>
              {getFieldDecorator('fromAmount', {
                initialValue: fromAmount,
                rules: [
                  {
                    required: true,
                  },
                  {
                    validator: validateNumber,
                  },
                ],
              })(<InputNumber style={{ width: '100%' }} />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col {...ColProps} >
            <FormItem label="ToCurrencyCode" hasFeedback {...formItemLayout}>
              {getFieldDecorator('toCurrencyCode', {
                initialValue: item.toCurrencyCode,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Select style={{ width: '100%' }} {...SelectProps} onSelect={handleCurrencyChange.bind(null, 'to')}>{currenciesTypeOption}</Select>)}
            </FormItem>
          </Col>
          <Col {...ColProps} >
            <FormItem label="ToAmount" hasFeedback {...formItemLayout}>
              {getFieldDecorator('toAmount', {
                initialValue: toAmount,
                rules: [
                  {
                    required: true,
                  },
                  {
                    validator: validateNumber,
                  },
                ],
              })(<InputNumber style={{ width: '100%' }} />)}
            </FormItem>
          </Col>
          <Col {...ColProps} >
            <FormItem label="TransmodeCode" hasFeedback {...formItemLayout}>
              {getFieldDecorator('transmodeCode', {
                initialValue: item.transmodeCode,
                rules: [
                  {
                    // required: true,
                  },
                ],
              })(<Select style={{ width: '100%' }} {...SelectProps}>{transmodeCodeOption}</Select>)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col {...ColProps} >
            <FormItem label="ExchangeRate" hasFeedback {...formItemLayout}>
              {getFieldDecorator('exchangeRate', {
                initialValue: item.exchangeRate,
                rules: [
                  {
                    required: true,
                  },
                  {
                    validator: validateNumber,
                  },
                ],
              })(<InputNumber style={{ width: '100%' }} />)}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <Button style={{ margin: '0 10px' }} type="primary" onClick={() => handlecalcu('muti')}><Icon type="close" /></Button >
            <Button type="primary" onClick={() => handlecalcu('divi')} style={{ marginRight: '20px' }}>÷</Button >
          </Col>
          <Col {...ColProps} >
            <FormItem label="LocalRate " hasFeedback {...formItemLayout}>
              {getFieldDecorator('localRate', {
                initialValue: localRate,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<InputNumber style={{ width: '100%' }} />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col {...ColProps} >
            <FormItem label="transactionDescription" hasFeedback {...formItemLayout}>
              {getFieldDecorator('transactionDescription', {
                initialValue: item.transactionDescription,
                rules: [
                  {
                    required: false,
                  },
                ],
              })(<TextArea />)}
            </FormItem>
          </Col>
          <Col {...ColProps} >
            <FormItem label="fundsComment" hasFeedback {...formItemLayout}>
              {getFieldDecorator('fundsComment', {
                initialValue: item.transactionDescription,
                rules: [
                  {
                    required: false,
                  },
                ],
              })(<TextArea />)}
            </FormItem>
          </Col>
          <Col {...ColProps} >
            <FormItem label="TransmodeComment" hasFeedback {...formItemLayout}>
              {getFieldDecorator('transmodeComment', {
                initialValue: item.transmodeComment,
                rules: [
                  {
                    required: false,
                  },
                ],
              })(<TextArea />)}
            </FormItem>
          </Col>
        </Row>
        <Row type="flex" justify="end">
          <Col span="8" offset="8">
            <FormItem label="AmountLocal" {...formItemLayout}>
              {getFieldDecorator('amountLocal', {
                initialValue: amountLocal,
              })(<InputNumber style={{ width: '100%' }} disabled />)}
            </FormItem>
          </Col>
          <Col span="4">
            <Button type="primary" onClick={() => handlecalcu('local')} style={{ margin: '0 10px' }}>calculate</Button >
          </Col>
        </Row>
      </span>
    )
  }
  const createServiceFee = () => {
    return (
      <span>
        <div className={styles.title}>Service Fee</div>
        <Row gutter={0}>
          <Col {...ColProps} >
            <FormItem label="CompanyAccount" hasFeedback {...formItemLayout}>
              {getFieldDecorator('companyAccountId', {
                initialValue: item.serviceFee && item.serviceFee.companyAccountId.toString(),
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Select style={{ width: '100%' }} >{companyAccountOption}</Select>)}
            </FormItem>
          </Col>
          <Col {...ColProps} >
            <FormItem label="PaymentType" hasFeedback {...formItemLayout}>
              {getFieldDecorator('payment', {
                initialValue: item.serviceFee && item.serviceFee.payment.toString(),
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Select style={{ width: '100%' }}>{paymentTypeOption}</Select>)}
            </FormItem>
          </Col>
          <Col {...ColProps} >
            <FormItem label="ServiceAmount" hasFeedback {...formItemLayout}>
              {getFieldDecorator('amount', {
                initialValue: item.serviceFee && item.serviceFee.amount.toString(),
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Select style={{ width: '100%' }}>{serviceAmountOption}</Select>)}
            </FormItem>
          </Col>
        </Row>
      </span>
    )
  }
  return (
    <Page inner>
      <Form layout="horizontal">
        <Row>
          {
            (currentUIStatus !== UIStatus.ARRIVE_AND_PAY_GET_SUCCESS) ? createSaveButton() : <Col span={5} />
          }
          <Col span={7} offset={12}>
            <WordCard WordCardProps={WordCardProps} />
          </Col>
        </Row>
        <div className={styles.div_form}>
          {
            createCustomerInfo()
          }
          <div>
            {
              createTransactionInfo()
            }
            {/* 选择后显示的实时汇率 如果汇率被选择了则显示该table */}
            {
              (currentUIStatus === UIStatus.DEFAULT) && currenciesRateData.length ? <Table dataSource={currenciesRateData} columns={curRateColumns} pagination={false} style={tableStyle} rowKey={(record) => { return record.id }} /> : ''
            }
            <div className={styles.title}>FromClient</div>
            {
              (currentUIStatus !== UIStatus.ARRIVE_AND_PAY_GET_SUCCESS) && createCreateButton(handleCreateFromDetail)
            }
            <Table columns={fromClientColumns} dataSource={fromClients} pagination={false} style={tableStyle} rowKey={(record) => { return record.id }} />
            <div className={styles.title}>toClient</div>
            {
              (currentUIStatus !== UIStatus.ARRIVE_AND_PAY_GET_SUCCESS) && createCreateButton(handleCreateToDetail)
            }
            <Table columns={toClientColumns} dataSource={toClients} pagination={false} style={tableStyle} rowKey={(record) => { return record.id }} />
            {
              (currentUIStatus !== UIStatus.DEFAULT) && (matchType !== 'edit') && createArriveAndPay()
            }
            {
              createServiceFee()
            }
          </div>
        </div>
      </Form>
      {modalVisible && <DetailModal {...modalProps} />}
    </Page>
  )
}

TransactionReceiptDetail.propTypes = {
  form: PropTypes.object.isRequired,
  dispatch: PropTypes.func,
  transactionReceiptDetail: PropTypes.object,
  loading: PropTypes.object,
}

export default connect(({ transactionReceiptDetail, loading }) => ({ transactionReceiptDetail, loading }))(Form.create()(TransactionReceiptDetail))
